<template>
  <van-popover v-model:show="showPopover" class="box-item" theme="dark" placement="top">
    <span class="px-30rpx">{{ data.data.label }}</span>
    <template #reference>
      <view
        class="flow-node"
        :class="data.data.current ? 'current-node' : ''"
        @click="handleClickNode"
      >
        <view class="node-header">
          <view class="node-header-icon" :class="data.data.current ? 'current-node-icon' : ''">
            <i class="iconfont icon-yonghu" style="color: #ffffff"></i>
          </view>
          <view class="node-name">发起人</view>
        </view>
        <view class="start-node-body"> </view>
      </view>
    </template>
  </van-popover>
  <Handle id="a" class="node" type="source" :position="Position.Bottom" />
</template>
<script setup>
  import { ref, onMounted } from 'vue';
  import { Handle, Position, useVueFlow } from '@vue-flow/core';

  const emits = defineEmits(['click']);

  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
  });

  const showPopover = ref(false);
  const { updateNodeData, getConnectedEdges } = useVueFlow();

  const onSelect = (color) => {
    updateNodeData(props.id, { color, isGradient: false });
    const connectedEdges = getConnectedEdges(props.id);
  };

  const onGradient = () => {
    updateNodeData(props.id, { isGradient: true });
  };

  const handleClickNode = () => {
    emits('click');
  };
</script>
<style scoped>
  @import '@/assets/style/flow.scss';
</style>
